<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<script type="text/javascript" src="js/jquery3.5.1.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/asiox.js"></script>
		<script src="js/common.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<style>
		#One {
			width: 400px;
			height: 600px;
			width: 450px;
			height: 380px;
			margin-top: 260px;
			padding-right: 30px;
			background-color: rgba(255, 255, 255, 0.282);
			box-shadow: 0px 0px 20px rgba(73, 72, 72, 0.5);
			/* 阴影的大小、模糊度、颜色 */
			border-radius: 40px;
		}

		#app {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}

		body {
			height: 100%;
			margin: 0;
			background-image: url("img/aaa.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			/* 背景图片是否重复 */
		}
		a{
			text-decoration: none;
			color: black;
		}
	</style>
	<body>
		<div id="app" style="text-align: center;">
			<div id="One">
				<h2 style="margin-left: 70px;">登录/<a href="注册.html">注册</a></h2>
				<el-form :model="user" status-icon :rules="rules" ref="user" label-width="100px" class="demo-user">
					<el-form-item label="账户名:" prop="username">
						<el-input v-model="user.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码:" prop="userpass">
						<el-input type="password" v-model="user.userpass" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="验证码:" prop="yan">
						<el-input v-model="yan"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('user')">提交</el-button>
						<el-button @click="resetForm('user')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					user: {
						userid: "",
						username: "",
						userpass: "",
						state: "",
						phone: "",
					},
					rules: {
						username: [{
							required: true,
							message: '请重新输入',
							trigger: 'blur'
						}],
						userpass: [{
							required: true,
							message: '请重新输入',
							trigger: 'blur'
						}]
					},
					yan: "",
				},
				methods: {
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								console.log(this.user.username);
								console.log(this.user.userpass);
								axios.get("http://localhost:8082/db137/login?username=" +
									this.user.username + "&password=" + this.user.userpass).then((res) => {
										console.log (JSON.stringify(res));
										if (res.data.code==200) {
											 this.$message('注册成功');
											 let token=res.data.data.token
												window.localStorage.setItem("token",token)
											 	location.href = "index - 老师版.html"
										}
										this.$message('登录失败');
										this.user= {
											userid: "",
											username: "",
											userpass: "",
											state: "",
											phone: "",
										}
										return
								})

							} else {
								console.log('输入有误,请重新输入!!');
								this.userInfoFrom = {}
								return false;
							}
						});
					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					}
				}
			})
		</script>


	</body>
</html>